@import "../../global";

.c-slide {
  // ======= 混合 ========
  #type(@color) {
    content: "";
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
    height: 8px;
    width: 8px;
    border-radius: 100%;
    background-color: @color;
  }
  // =====================

  .c-slide-header {
    & > span {
      margin-right: 20px;
      color: @font-color;
    }
    .c-slide-title {
      display: inline-block;
      margin-right: 10px;

      .success {
        color: @green;
      }
      .processing {
        color: @blue;
      }
      .stop {
        color: @yellow;
      }
      .error {
        color: @red;
      }
    }
  }

  .c-slide-content {
    display: flex;
    align-items: center;
    .c-slide-cont {
      display: flex;
      width: 300px;
      height: 10px;
      border-radius: 10px;
      overflow: hidden;
      background-color: @background-color;
      .c-slide-success {
        background-color: @green;
      }
      .c-slide-processing {
        background-color: @blue;
      }
      .c-slide-stop {
        background-color: @yellow;
      }
      .c-slide-error {
        background-color: @red;
      }
    }

    .c-slide-type {
      & > span {
        font-size: 14px;
      }

      .c-type-success::before {
        #type(@green);
      }
      .c-type-processing::before {
        #type(@blue);
      }
      .c-type-stop::before {
        #type(@yellow);
      }
      .c-type-error::before {
        #type(@red);
      }
    }
  }
}
